<template>
    <div>
        <div class="user_head">
            <h1>用户管理</h1>
            <span>用户名称</span>
            <input type="text" v-model="username"></input>
            <Button type="primary" id="search" @click="getUsers(1,10,username)">查询</Button>
            <Button type="primary" id="search_all" @click="getUsers()">查询所有</Button>
        </div>
        <Table :columns="columns1" :data="users.records">

        </Table>
        <Row class="page_choose">
            <Col>
                <Page @on-change="changePage" @on-page-size-change="changepageSize"
                      show-sizer show-elevator/>
            </Col>
        </Row>
    </div>
</template>
<script>
    import {mapActions} from 'vuex'

    export default {
        data () {
            return {

                username: null,
                users: {},
                uStyle: {
                    fontSize: '16px',
                    color: 'rgba(0,0,0,0.85)',
                    lineHeight: '24px',
                    display: 'block',
                    marginBottom: '16px'
                },
                columns1: [
                    {
                        title: '用户名',
                        key: 'username',
                    },
                    {
                        title: '注册时间',
                        key: 'createTime'
                    },
                    {
                        title: '联系电话',
                        key: 'tel'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 300,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除用户')
                            ]);
                        }
                    }
                ],
                // data1: [
                //     {
                //         name: 'John Brown',
                //         views: 2019-4-12,
                //         category: 'New York No. 1 Lake Park'
                //     },
                //     {
                //         name: 'Jim Green',
                //         views: 2018-12-5,
                //         category: 'London No. 1 Lake Park'
                //     },
                //     {
                //         name: 'Joe Black',
                //         views: 2020-7-25,
                //         category: 'Sydney No. 1 Lake Park'
                //     },
                //     {
                //         name: 'Jon Snow',
                //         views: 2016-8-28,
                //         category: 'Ottawa No. 2 Lake Park'
                //     }
                // ],
            }
        },
        methods: {
            ...mapActions('adminUser', ["getAllUser","deleteUser"]),
            remove(index) {
                this.deleteUser({
                    id: this.users.records[index].id,
                    callback: success => {
                        if (success) {
                            this.users.records.splice(index, 1);
                            this.$Message.success("删除成功");
                        } else
                            this.$Message.error("删除失败");
                    }
                })
            },
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            changePage: function (page) {

            },
            changepageSize: function (size) {

            },
            getUsers: function (page = 1, size = 10, username = null) {
                if (username) {
                    username = `%${username}%`;
                }
                this.getAllUser({
                    page, size, username,
                    callback: users => {
                        this.users = users;
                    }
                })
            }
        },
        created: function () {
            this.getUsers();
        },
    }

</script>
<style>
    .demo-drawer-profile{
        font-size: 14px;
    }
    .demo-drawer-profile .ivu-col{
        margin-bottom: 12px;
    }
    .user_head{
        margin-bottom: 20px;
    }
    .user_head span{
        font-size: 14px;
    }
    .user_head input{
        height: 36px;
        width: 400px;
        margin: 0 20px;
        border:1px solid #000000;
        font-size: 18px;
        text-indent: 1em;
        border-radius: 6px;
        outline: unset;
    }
    .user_head button{
        margin: 0 2px;
    }
    #remarks button{
        margin: 0 5px;
    }
    #remarks button:nth-child(2),#remarks button:nth-child(3),#remarks button:nth-child(4){
        margin-top: 10px;
    }
</style>